import { Avatar, Col, Modal, Row, Tag } from 'antd';
import styles from './contextModal.less';
import robotImg from '../assets/kefu.png';
import customImg from '../assets/custom.png';
import React from 'react';

const ContextModal = props => {
  const [imgReviewVisible, setImgReviewVisible] = React.useState(false);
  const [reviewImgSrc, setReviewImgSrc] = React.useState('');

  const openGaller = src => {
    setReviewImgSrc(src);
    setImgReviewVisible(true);
  };

  const renderAnswers = item => {
    if (item) {
      if (item.indexOf('img') != -1) {
        let a = item.replace('img', 'img style=""');
        let ahref = a;
        if (item.indexOf('href') != -1) {
          let reg = new RegExp('href="', 'g');
          ahref = item.replace(reg, `target='_blank' href="`);
        };
        return (
          <div
            className={styles.customMessageItem}
            onClick={() => openGaller(ahref)}
            style={{ maxWidth: 388, wordBreak: 'break-word', paddingLeft: 2 }}
          >
            <div className={styles.bigImg} dangerouslySetInnerHTML={{ __html: ahref }} />
          </div>
        );
      } else if (item.indexOf('href') != -1) {
        let ahref = '';
        let reg = new RegExp('href="', 'g');
        ahref = item.replace(reg, `target='_blank' href="`);
        return (
          <div
            className={styles.customMessageItem}
            style={{ maxWidth: 388, wordBreak: 'break-word', paddingLeft: 2 }}
          >
            <div>
              <div dangerouslySetInnerHTML={{ __html: ahref }} />
            </div>
          </div>
        );
      }
    };
    
    return (
      <div dangerouslySetInnerHTML={{ __html: item }} />
    );
  };

  return (
    <Modal
      title={'聊天上下文'}
      visible={props.visible}
      onCancel={props.cancelContextModal}
      footer={null}
      bodyStyle={{
        maxHeight: 'calc(100vh - 120px)',
        overflow: 'auto',
      }}
      width={'60vw'}
      wrapClassName={styles.hideScroll}
      centered={true}
    >
      {props.message.map((item, index) => {
        return item.messageDirection == 'S' ? (
          <div className={styles.sysAnswer}>
            {item.answer}
          </div>
        ) : (
          <div>
            {/** 问题 */}
            {
              item.question && item.question !== 'qizhi_welcome' ? (
                <div className={styles.lineBox}>
                  <img src='/robotConfigImg/user.png' className={styles.messageAvater} />
                  <div className={styles.messageBox}>
                    <div dangerouslySetInnerHTML={{__html:item.question}} ></div>
                  </div>
                  
                </div>
              ) : ''
            }
            {/** 答案 */}
            {
              item.answer ? (
                <div className={styles.lineBox}>
                  <img src='/robotConfigImg/robot.png' className={styles.messageAvater} />
                  <div className={styles.messageBox} style={{background:"#ffffff"}}>
                    {
                      renderAnswers(item.answer)
                    }
                  </div>
                </div>
              ) : ''
            }
          </div>
        )
      })}
      <Modal
        bodyStyle={{
          maxHeight: '80vh',
          overflow: 'auto',
        }}
        width={'calc(80vw)'}
        className="modalovel"
        visible={imgReviewVisible}
        title="图片详情"
        onCancel={() => {
          setImgReviewVisible(false);
        }}
        footer={null}
      >
        {<div dangerouslySetInnerHTML={{ __html: reviewImgSrc }} />}
      </Modal>
    </Modal>
  );
};
export default ContextModal;
